<template>
    <div class="map_warp">
      <div class="map-container" id="map-container"> 

      </div>
      <div class="top_panel">
            <div class="left_panel"></div>
            <div class="content_panel">
              <Row style="height:100%" type="flex" justify="center" align="middle" class="countto-page-row">
                 <a class="yuyue"> <icons :size="16" type="yuyue" title="预约单"/> </a>
                 <a class="linshi"> <icons :size="20" type="linshi" title="临时单"/> </a>
                 <a class="help"> <icons :size="16" type="question" title="求助"/></a>
                 <a class="timeout"> <icons :size="16" type="lianjiechaoshi" title="超时及路线偏移"/> </a>
                 <a class="error"> <icons :size="16" type="zhixingyichang" title="送货异常" /></a>
              </Row>
            </div>
            <div class="right_panel">
               <a @click="isShowSetting=true"  class="settingBut"> <icons :size="16" type="xitong" title="系统设置"/> </a>
            </div>  
      </div>
      <div class="data_info">
          <div class="data_info_head"><span>数据面板</span></div>
          <div class="data_info_item" style="color:#1d99e4"> <span>预约单</span><span class="iconfont el">100</span> </div>
          <div class="data_info_item" style="color:#9618f3"> <span>临时单</span> <span class="iconfont el">100</span></div>
          <div class="data_info_item" style="color:#23d60f"> <span>求助单</span> <span class="iconfont el">100</span> </div>
          <div class="data_info_item" style="color:#ea9e0df5"> <span>超时/偏移</span> <span class="iconfont el">100</span> </div>
          <div class="data_info_item" style="color:red"> <span>异常单</span> <span class="iconfont el">100</span></div>
      </div>
      <!--系统设置区域-->
      <div class=""></div>
      <Drawer class-name="setting_pnel" title="系统参数配制" placement="right" :closable="true" v-model="isShowSetting">
            <div class="sett_item_warp"> <span>开启自动定位</span><i-switch  /></div>
               
      </Drawer>
    </div>
</template>
<script>
import Icons from '_c/icons'
import {getCarMarker} from '@/libs/amp/marker'
export default {
 components: {
    Icons,
  },
  data () {
    return {
        
        isShowSetting:false,
        setting_pnel:{
             padding:'0px'
        },
        mapObj:null

     }
  },
  methods: {
      intit(){
        /* eslint-disable no-alert, no-console */
        this.mapObj= new AMap.Map('map-container', {
           zoom:13,

          mapStyle:'amap://styles/dark',//darkblue 极夜蓝  normal 标准 whitesmoke 远山黛 dark  幻影黑 light 月光银
        });
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.CircleEditor'],()=>{
            var toolbar = new AMap.ToolBar();
            this.mapObj.addControl(new AMap.Scale())
            this.mapObj.addControl(new AMap.OverView())
            this.mapObj.addControl(toolbar);
        });
      },
      openSetting(){
         
      }
  },  
  mounted () {
        this.intit();
        var car={
          position:[113.70008, 22.783206],
          name:'车辆一号'
        }
        getCarMarker(this.mapObj,car)
        setTimeout(() => {
             var car={
              position:[113.690477, 23.062434],
              name:'车辆二号'
            }
             getCarMarker(this.mapObj,car)
             
              setTimeout(() => {
                var car={
                  position:[113.673915, 23.81836],
                  name:'车辆二号'
                }
                getCarMarker(this.mapObj,car)

               }, 5000);
        }, 5000);
        
       
      //   var marker = new AMap.Marker({
      //     position: new AMap.LngLat(),
          
      //     icon: this.getCarIcon(), // 添加 Icon 实例
      //     title: '北京',
      //     zoom: 13
      //  });
       
      // setTimeout(() => {
      //                   marker.setAnimation('AMAP_ANIMATION_BOUNCE');
      //                   }, 1000);

      //  this.mapObj.add(marker);
   
  }
}
</script>
<style lang="less" scoped>
      .map_warp{
        height: 100%;
        position: relative;
        width: 100%;
         .map-container{
            height: 100%;
            width: 100%;
         }
         .top_panel{
           position: absolute;
           top: 10px;
           z-index: 888 ;
           display: flex;
           width: 100%;
           .left_panel{
             flex: 1;
           }
           .content_panel{
              border: 1px solid white;
              background: white;
              min-width: 100px;
              height: 35px;
              margin: 0 auto;
              border-radius: 4px;
              a{
                    height: 35px;
                    width: 35px;
                    line-height: 35px;
                    align-items: center;
                    text-align: center;
                    border-right: 1px solid #e8eaec;

                :last-child{
                  border-right: 0px solid #e8eaec;
                }
               }
              .linshi{
                i{
                  color: #f50ab5 !important;
                }
              }
              .yuyue{
                  color: #10c7f3f5;
              }
              .timeout{
                  color: #ea9e0df5 ;
              }
              .help{
                  color: #0f8e0e  ;
              }
              .error{
                  color: red ;
              }
           }
           .right_panel{
             flex: 1;
             .settingBut{
                  height: 35px;
                  width: 35px;
                  border-radius: 50%;
                  display: -webkit-box;
                  text-align: center;
                  line-height: 35px;
                  background: #353232c9;
                  justify-content: center;
                  display: flex;
                  float:right;
                  margin-right: 10px;
                  color: white
             }
           }
         }
      }
      .data_info{
        width: 200px;
        position: absolute;
        top: 280px;
        left: 20px;
        min-height: 200px;
        background-color:rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        .data_info_head{
           background: rgba(0, 0, 0, 0.6);
           padding: 5px;
           text-align: center;
           color: white;
           border-bottom:0px solid rgba(0, 0, 0, 0.5);
        }
        .data_info_item{
          padding: 5px;
          display: flex;
          justify-content:space-between;
          cursor: pointer;
          border-bottom: 0px solid #e8eaec;
           .el{
              font-size: 10px;
              font-weight: 600;
              color: yellow;
              &:after{
                    content: "\e633";
                    margin-left: 10px;
                    color: #808695;
              }
            }
           &:hover{
              background: rgba(0, 0, 0, 0.4);
           }
        }
      }
      .setting_pnel{
            width: 100%;
            position:absolute;
            bottom: 0px;
            min-height: 300px;
            background-color:rgba(0,0,0,0.2);
            color: white;
            .sett_item_warp{
              display: flex;
              justify-content: space-between;
              padding: 10px 5px;
              border-bottom: 1px solid #e8eaec;
               span{
                 color: black;
               }
            }
        }
</style>
